<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="nav-header">
      <div class="logo">
        <i class="el-icon-magic-stick"></i>
        MBTI测试系统
      </div>
      <div class="nav-right">
        <!-- 未登录状态 -->
        <template v-if="!userInfo">
          <el-button type="text" class="login-btn" @click="$router.push('/admin/login')">
            <i class="el-icon-user"></i> 登录
          </el-button>
          <el-button type="text" class="register-btn" @click="$router.push('/admin/register')">
            <i class="el-icon-plus"></i> 注册
          </el-button>
        </template>
        <!-- 已登录状态 -->
        <template v-else>
          <div class="user-info">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar :size="32" icon="el-icon-user" class="user-avatar"></el-avatar>
                <span class="username">{{ userInfo.name }}</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userCenter">
                  <i class="el-icon-s-home"></i> 个人中心
                </el-dropdown-item>
                <el-dropdown-item command="logout">
                  <i class="el-icon-switch-button"></i> 退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 欢迎区域 -->
      <div class="hero-section">
        <div class="hero-content">
          <h1 class="animate__animated animate__fadeInDown">探索你的MBTI性格类型</h1>
          <p class="animate__animated animate__fadeInUp animate__delay-1s">
            通过专业的MBTI测试，发现真实的自己，找到最适合的职业发展方向
          </p>
          <div class="hero-buttons animate__animated animate__fadeInUp animate__delay-2s">
            <template v-if="userInfo">
              <el-button type="primary" size="large" round @click="handleStartTest" v-if="userInfo.role === 'student'">
                  <i class="el-icon-video-play"></i> 开始测试
                </el-button>
              <el-button type="primary" size="large" round @click="goToUserCenter" v-else>
                  <i class="el-icon-s-home"></i> 进入用户中心
                </el-button>
            </template>
            <template v-else>
              <div class="login-tip">
                <i class="el-icon-warning-outline"></i>
                请先<el-button type="text" @click="$router.push('/admin/login')">登录</el-button>
                或<el-button type="text" @click="$router.push('/admin/register')">注册</el-button>
                后继续
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- 特点介绍 -->
      <div class="features-section">
        <div class="features-container">
          <el-row :gutter="40" type="flex" justify="center">
            <el-col :xs="24" :sm="8">
              <div class="feature-card">
                <div class="feature-icon">
                  <i class="el-icon-discover"></i>
                </div>
                <h3>了解自己</h3>
                <p>深入探索性格特征，发现内在潜力</p>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="feature-card">
                <div class="feature-icon">
                  <i class="el-icon-aim"></i>
                </div>
                <h3>职业规划</h3>
                <p>找到最适合的职业发展方向</p>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="feature-card">
                <div class="feature-icon">
                  <i class="el-icon-connection"></i>
                </div>
                <h3>人际关系</h3>
                <p>改善沟通方式，提升人际关系</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- MBTI类型介绍 -->
      <div class="mbti-types">
        <h2>16种MBTI性格类型</h2>
        <el-row :gutter="20">
          <el-col :xs="12" :sm="8" :md="6" v-for="type in mbtiTypes" :key="type.code">
            <el-card class="type-card" shadow="hover" @click.native="showTypeDetail(type.code)">
              <div class="type-header">
                <h3>{{ type.code }}</h3>
                <p>{{ type.name }}</p>
              </div>
              <div class="type-desc">
                <p>{{ type.description }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- MBTI类型详情弹窗 -->
    <el-dialog
      :title="selectedType ? `${selectedType.mbtiType} - ${selectedType.typeName}` : ''"
      :visible.sync="dialogVisible"
      width="60%"
      class="mbti-dialog">
      <div v-if="selectedType" class="type-detail">
        <el-tabs type="border-card">
          <el-tab-pane label="性格特征">
            <div class="detail-content">
              <h4>性格描述</h4>
              <p>{{ selectedType.description }}</p>
              <h4>性格模式</h4>
              <p>{{ selectedType.model }}</p>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="工作偏好">
            <div class="detail-content">
              <h4>工作环境偏好</h4>
              <p>{{ selectedType.workEnvironmentPreferences }}</p>
              <h4>领域偏好</h4>
              <p>{{ selectedType.filed }}</p>
            </div>
          </el-tab-pane>

          <el-tab-pane label="职业发展">
            <div class="detail-content">
              <h4>适合的职业</h4>
              <p>{{ selectedType.career }}</p>
              <h4>发展建议</h4>
              <p>{{ selectedType.developmentSuggestions }}</p>
            </div>
          </el-tab-pane>

          <el-tab-pane label="劣势与建议">
            <div class="detail-content">
              <h4>需要注意的劣势</h4>
              <p>{{ selectedType.weakness }}</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-else class="loading-state">
        <el-skeleton :rows="6" animated></el-skeleton>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mbtiTypeApi } from '@/api'

export default {
  name: 'Home',
  data() {
    return {
      userInfo: null,
      mbtiTypes: [
        { code: 'ISTJ', name: '检查者', description: '安静、严肃、通过全面性和可靠性获得成功。' },
        { code: 'ISFJ', name: '保护者', description: '安静、友好、有责任心和尽职尽责。' },
        { code: 'INFJ', name: '咨询师', description: '寻求意义和联系，希望了解什么能够激励人。' },
        { code: 'INTJ', name: '建筑师', description: '在实现自己的想法和达成自己的目标时有创新的想法。' },
        { code: 'ISTP', name: '鉴赏家', description: '灵活和宽容，安静地观察直到出现问题。' },
        { code: 'ISFP', name: '探险家', description: '安静、友好、敏感和仁慈。享受当前。' },
        { code: 'INFP', name: '调停者', description: '理想主义，对自己和他人都忠诚。' },
        { code: 'INTP', name: '逻辑学家', description: '寻求在自己感兴趣的任何事物中找出合理的解释。' },
        { code: 'ESTP', name: '企业家', description: '灵活和宽容，采取实用的方法。' },
        { code: 'ESFP', name: '表演者', description: '外向、友好、接受性强。热爱生活、人类和物质享受。' },
        { code: 'ENFP', name: '竞选者', description: '热情洋溢、富有想象力。认为生活充满可能。' },
        { code: 'ENTP', name: '辩论家', description: '反应快、睿智，善于应对挑战。' },
        { code: 'ESTJ', name: '总经理', description: '实际、现实主义者，具有企业或技术方面的天赋。' },
        { code: 'ESFJ', name: '执政官', description: '热心肠、有责任心、合作性强。' },
        { code: 'ENFJ', name: '主人公', description: '热情、为他人着想、反应敏捷、负责任。' },
        { code: 'ENTJ', name: '指挥官', description: '坦率、果断，天生的领导者。' }
      ],
      dialogVisible: false,
      selectedType: null
    }
  },
  created() {
    // 从localStorage获取用户信息
    const userStr = localStorage.getItem('user')
    if (userStr) {
      this.userInfo = JSON.parse(userStr)
    }
  },
  methods: {
    handleStartTest() {
      // 清除之前的测试完成状态，允许用户重新测试
      if (this.userInfo && this.userInfo.userId) {
        localStorage.removeItem(`test_submitted_${this.userInfo.userId}`)
        localStorage.removeItem(`mbti_progress_${this.userInfo.userId}`)
        console.log('已清除用户测试状态，允许重新测试')
      }
      this.$router.push('/home/test')
    },
    goToUserCenter() {
      // 根据用户角色跳转到不同的用户中心
      const roleMap = {
        'admin': '/admin/profile',
        'teacher': '/teacher/profile',
        'student': '/student/profile'
      }
      const path = roleMap[this.userInfo.role]
      if (path) {
        this.$router.push(path)
      }
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.$confirm('确认退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.removeItem('user')
          this.userInfo = null
          this.$message.success('退出登录成功')
          this.$router.push('/admin/login')
        }).catch(() => {
          this.$message.info('已取消退出')
        })
      } else if (command === 'userCenter') {
        this.goToUserCenter()
      }
    },
    async showTypeDetail(typeCode) {
      this.dialogVisible = true
      this.selectedType = null
      try {
        const response = await mbtiTypeApi.get(typeCode)
        if (response.code === 200 && response.data) {
          this.selectedType = response.data
        } else {
          this.$message.error('获取MBTI类型详情失败')
        }
      } catch (error) {
        console.error('获取MBTI类型详情失败：', error)
        this.$message.error('获取MBTI类型详情失败')
      }
    }
  }
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo i {
  font-size: 24px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.user-avatar {
  margin-right: 8px;
}

.username {
  font-size: 14px;
  color: #303133;
}

.login-btn, .register-btn {
  font-size: 14px;
  padding: 0 15px;
}

.main-content {
  padding-top: 64px; /* 为固定导航栏留出空间 */
}

.hero-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0f7fa 0%, #80deea 100%);
  padding: 0 20px;
  margin-bottom: 0;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  padding: 40px 0;
}

.hero-content h1 {
  font-size: 42px;
  color: #303133;
  margin-bottom: 20px;
  font-weight: bold;
}

.hero-content p {
  font-size: 18px;
  color: #606266;
  margin-bottom: 30px;
  line-height: 1.6;
}

.hero-buttons {
  margin-top: 40px;
}

.features-section {
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  background: linear-gradient(180deg, #e0f7fa 0%, #80deea 100%);
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  transform: translateY(-40px);
}

.feature-card {
  text-align: center;
  padding: 40px 30px;
  background: #fff;
  border-radius: 12px;
  transition: all 0.3s;
  height: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: #e6f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-icon i {
  font-size: 36px;
  color: #409EFF;
}

.feature-card h3 {
  font-size: 24px;
  color: #303133;
  margin: 0 0 15px;
  font-weight: bold;
}

.feature-card p {
  color: #606266;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.mbti-types {
  padding: 40px 20px;
  max-width: 1200px;
  margin: -20px auto 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.mbti-types h2 {
  text-align: center;
  font-size: 32px;
  color: #303133;
  margin-bottom: 30px;
  font-weight: bold;
}

.type-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.type-header {
  text-align: center;
  margin-bottom: 10px;
}

.type-header h3 {
  margin: 0;
  color: #409EFF;
  font-size: 24px;
}

.type-header p {
  margin: 5px 0;
  color: #666;
}

.type-desc {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.el-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px !important;
}

.el-col {
  padding: 0 10px;
  margin-bottom: 20px;
  display: flex;
}

.login-tip {
  color: #606266;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.login-tip i {
  color: #E6A23C;
}

.login-tip .el-button--text {
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 50vh;
  }

  .hero-content h1 {
    font-size: 32px;
  }

  .hero-content p {
    font-size: 16px;
  }

  .features-container {
    padding: 40px 20px;
    transform: translateY(-20px);
  }

  .el-col {
    margin-bottom: 20px;
  }

  .el-col:last-child {
    margin-bottom: 0;
  }

  .feature-card {
    padding: 30px 20px;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .el-col {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

@media (min-width: 1201px) {
  .el-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

.mbti-dialog .type-detail {
  padding: 0;
}

.detail-content {
  padding: 20px;
}

.detail-content h4 {
  color: #409EFF;
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: bold;
}

.detail-content p {
  margin: 0 0 20px 0;
  line-height: 1.8;
  color: #606266;
  text-indent: 2em;
  font-size: 15px;
}

.detail-content p:last-child {
  margin-bottom: 0;
}

.loading-state {
  padding: 20px;
}

/* 修改标签页样式 */
::v-deep .el-tabs--border-card {
  box-shadow: none;
  border: none;
}

::v-deep .el-tabs__header {
  background-color: #f5f7fa;
  border-bottom: 2px solid #e4e7ed;
}

::v-deep .el-tabs__item {
  color: #606266;
  font-size: 15px;
  padding: 0 25px;
  height: 45px;
  line-height: 45px;
}

::v-deep .el-tabs__item.is-active {
  color: #409EFF;
  font-weight: bold;
}

::v-deep .el-tabs__content {
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-top: none;
}
</style>